<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>内置组件 -slot讲解</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
	<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	<h1>内置组件 -slot讲解</h1>
	<hr>
	<div id="app">
		<jspang>
	        <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
	        <span slot="netName">{{jspangData.netName}}</span>    
	        <span slot="skill">{{jspangData.skill}}</span>    
	    </jspang>

	</div>
	<template id="tmp">
	    <div>
	        <p>博客地址：<slot name="bolgUrl"></slot></p>
	        <p>网名：<slot name="netName"></slot></p>
	        <p>技术类型：<slot name="skill"></slot></p>
	        
	    </div>
	</template>	
</body>
<script type="text/javascript">
var jspang={
    template:'#tmp'
}	

var app = new Vue({
	el:'#app',
	data:{
		jspangData:{
	        bolgUrl:'http://jspang.com',
	        netName:'技术胖',
	        skill:'Web前端'
	    }
	},
	methods:{
		add:function () {
			this.message++;
		}
	},
	components:{
		"jspang":jspang
	}
})

</script>
</html>